<template>
  <view>
    <u-navbar :border-bottom="false" :background="{ background: '' }" back-icon-color="#222222" title-color="#222222" :immersive="true"></u-navbar>
    <view class="" style="width: 100%; height: 420rpx; background: url(https://wenzhen.jiangkukeji360.com/static/index/ysdetail.png) no-repeat; background-size: 100% 100%">
      <view class="" style="display: flex; align-items: center; justify-content: space-between; padding-top: 119rpx">
        <view class="" style="display: flex; align-items: center; padding-left: 30rpx">
          <image :src="doctors.doctor_avatar" mode="aspectFill" style="width: 112rpx; height: 112rpx; border: 2rpx solid #ffffff; border-radius: 50%"></image>
          <view class="" style="padding-left: 25rpx">
            <view class="">
              <text style="font-size: 32rpx; font-weight: bold">{{ doctors.doctor_name }}</text>
              <text style="font-size: 26rpx; padding-left: 15rpx">{{ doctors.doctor_title }}</text>
            </view>
            <view class="" style="display: flex; align-items: center">
              <view class="" style="width: 150rpx">
                <text style="font-size: 26rpx; color: #666666">{{ doctors.department_name }}</text>
              </view>

              <view class="" style="width: 300rpx; padding-left: 24rpx">
                <text style="font-size: 26rpx; color: #666666">{{ doctors.hospital_name }}</text>
              </view>
            </view>
            <view class="" style="display: flex; align-items: center; flex-wrap: wrap">
              <view class="btn" style="margin-top: 13rpx; margin-right: 10rpx" v-for="i in doctors.lable">
                {{ i.label_title }}
              </view>
            </view>
          </view>
        </view>
        <!-- 分 -->
        <view class="" style="padding-right: 33rpx">
          <text style="font-size: 36rpx">{{ doctors.score }}</text>
          <text style="font-size: 26rpx">分</text>
        </view>
      </view>
      <view class="" style="display: flex; align-items: center; justify-content: space-between; padding: 47rpx 39rpx 19rpx 53rpx">
        <view class="" style="font-size: 28rpx" v-if="doctors.is_order_nums != 1">
          <text>服务人数({{ doctors.order_nums }})</text>
          <text style="padding-left: 36rpx">锦旗({{ doctors.flags_nums }})</text>
        </view>
        <view class="" style="display: flex; align-items: center">
          <image src="https://wenzhen.jiangkukeji360.com/static/index/share.png" mode="" style="width: 32rpx; height: 32rpx"></image>
          <view class="" style="width: 32rpx; height: 32rpx">
            <image
              :src="doctors.is_collect == 1 ? 'https://wenzhen.jiangkukeji360.com/static/index/scs.png' : 'https://wenzhen.jiangkukeji360.com/static/index/sc.png'"
              mode=""
              style="width: 32rpx; height: 32rpx; margin-left: 24rpx"
              @tap="rate"
            ></image>
          </view>
        </view>
      </view>
    </view>
    <!-- 擅长 -->
    <view class="" style="margin: 0 28rpx; background: #fff; border-radius: 20rpx">
      <view class="" style="display: flex; align-items: flex-start; padding: 25rpx">
        <view class="">
          <image src="https://wenzhen.jiangkukeji360.com/static/index/shang.png" mode="" style="width: 62rpx; height: 28rpx"></image>
        </view>
        <view class="" style="font-size: 26rpx; color: #666666; padding-left: 16rpx">
          {{ doctors.disease }}
        </view>
      </view>

      <view class="" style="display: flex; align-items: flex-start; padding: 0 25rpx 22rpx">
        <view class="">
          <image src="https://wenzhen.jiangkukeji360.com/static/index/jian.png" mode="" style="width: 62rpx; height: 28rpx"></image>
        </view>
        <view class="" style="font-size: 26rpx; color: #666666; padding-left: 16rpx">
          {{ doctors.doctor_synopsis }}
        </view>
      </view>
    </view>
    <!-- 公告 -->
    <view class="" style="margin: 20rpx 28rpx; background: #fff; border-radius: 20rpx" @tap="goget" v-if="list != ''">
      <u-notice-bar mode="horizontal" :list="list" :more-icon="true" color="#1A9EFF"></u-notice-bar>
    </view>
    <!-- 门诊信息 -->
    <view class="" style="background: #fff; border-radius: 20rpx; margin: 28rpx">
      <view class="" style="display: flex; align-items: center; justify-content: space-between; padding: 29rpx">
        <view class="" style="font-size: 34rpx; color: #222222; font-weight: bold">门诊信息</view>
        <!-- <view class="" style="font-size: 26rpx;color: #1A9EFF;">
					查看详情
				</view> -->
      </view>
      <view class="" v-for="(i, k) in doctors.data_res" :key="k">
        <view class="" style="display: flex; align-items: center">
          <!-- <view class="" style="font-size: 22rpx;color: #fff;width: 64rpx;height: 34rpx;background: #FF7251;
				border-radius: 17rpx;text-align: center;line-height: 34rpx;margin-left: 26rpx;">
									三甲
								</view> -->
          <view class="" style="font-size: 28rpx; font-weight: bold; padding-left: 22rpx">
            {{ i.name }}
          </view>
        </view>
        <view class="" style="font-size: 28rpx; padding: 29rpx">
          {{ i.data_res }}
        </view>
      </view>
    </view>
    <!-- 患者赠送锦旗 -->
    <view class="" style="margin: 20rpx 28rpx; background: linear-gradient(180deg, #fff4e2 0%, #ffffff 71%); padding-bottom: 20rpx">
      <view class="" style="display: flex; align-items: center; justify-content: space-between">
        <view class="" style="font-size: 34rpx; font-weight: bold; padding: 36rpx 30rpx">患者赠送锦旗（{{ doctors.flags_nums }}）</view>
        <view class="" style="font-size: 26rpx; color: #1a9eff; padding-right: 30rpx" @tap="send">查看更多</view>
      </view>

      <view
        class=""
        style="background: #fff1da; border-radius: 12rpx; display: flex; align-items: center; margin: 26rpx; padding: 46rpx 0 51rpx 34rpx"
        @tap="send"
        v-if="doctors.flags && doctors.flags.title"
      >
        <view class="">
          <image :src="img_url + doctors.flags.image" mode="" style="width: 136rpx; height: 136rpx"></image>
        </view>
        <view class="" style="padding-left: 30rpx">
          <view class="" style="font-size: 28rpx">
            {{ doctors.flags.title }}
          </view>
          <view class="" style="font-size: 26rpx; color: #666666; padding-top: 10rpx">
            {{ doctors.flags.content }}
          </view>
        </view>
      </view>
    </view>

    <!-- 评价反馈 -->
    <view class="" style="margin: 30rpx 28rpx; background: linear-gradient(180deg, #fff4e2 0%, #ffffff 16%); border-radius: 20rpx 20rpx 0rpx 0rpx" v-if="doctors.is_service != 1">
      <view class="" style="display: flex; align-items: center; justify-content: space-between; padding: 29rpx">
        <view class="" style="font-size: 34rpx; color: #222222; font-weight: bold">评价反馈（{{ doctors.evaluate_nums }}）</view>
        <view class="" style="font-size: 26rpx; color: #1a9eff" @tap="getlook">查看详情</view>
      </view>
      <!-- 河南省患者 -->
      <view class="" v-for="(i, k) in doctors.evaluate" :key="k">
        <view class="" style="display: flex; align-items: center; justify-content: space-between; padding: 0 29rpx">
          <view class="" style="display: flex; align-items: center">
            <view class="" style="font-size: 30rpx">
              {{ i.username }}
            </view>
            <view class="">
              <u-rate :count="count" v-model="i.star" active-color="#FFB821" :disabled="true"></u-rate>
            </view>
          </view>
          <view class="" style="font-size: 26rpx; color: #666666">
            {{ i.create_time_text }}
          </view>
        </view>
        <view class="" style="font-size: 28rpx; padding: 32rpx 28rpx; display: flex; align-items: flex-start">
          <view class="" style="letter-spacing: 1rpx">
            <text class="" style="color: #666666">评价：</text>
            {{ i.content }}
          </view>
        </view>
      </view>
    </view>
    <view class="" style="height: 192rpx"></view>
    <!-- 底部栏 -->
    <view
      class=""
      style="
        width: 100%;
        height: 192rpx;
        background: #fff;
        box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.1);
        border-radius: 20rpx 20rpx 0px 0px;
        position: fixed;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: space-around;
      "
      v-if="doctors.is_service != 1"
    >
      <view class="" style="font-size: 26rpx; text-align: center" @tap="wen(id)">
        <image src="https://wenzhen.jiangkukeji360.com/static/index/wz.png" mode="" style="width: 60rpx; height: 60rpx"></image>
        <view class="">在线问诊</view>
      </view>
      <view class="" style="font-size: 26rpx; text-align: center" @tap="make">
        <image src="https://wenzhen.jiangkukeji360.com/static/index/yuyue.png" mode="" style="width: 60rpx; height: 60rpx"></image>
        <view class="">预约挂号</view>
      </view>
      <view class="" style="font-size: 26rpx; text-align: center" @tap="wen(2)">
        <image src="https://wenzhen.jiangkukeji360.com/static/index/tw.png" mode="" style="width: 60rpx; height: 60rpx"></image>
        <view class="">提问服务</view>
      </view>
    </view>
	<u-modal v-model="show" :show-cancel-button="true" title="选择患者" @confirm="confirm(id,jook)">
	  <view class="slot-content">
	    <view
	      class=""
	      v-for="(i, k) in jook"
	      :key="k"
	      style="display: flex; align-items: center; font-size: 28rpx; justify-content: space-between; padding: 28rpx 51rpx"
	      @tap="cull = k"
	    >
	      <view class="">
	        {{ i.patient_name }}
	      </view>
	      <radio :checked="cull == k" style="transform: scale(0.7)" color="#0FB8FF"></radio>
	    </view>
	  </view>
	  <view class="" style="text-align: center; font-size: 30rpx; color: #1a9eff; padding: 30rpx" @tap="add">添加患者</view>
	</u-modal>
  </view>
</template>

<script>
export default {
  data() {
    return {
      raios: true,
      count: 5,
      value: 2,
      list: [],
      id: null,
      doctors: {},
	  num:null,
	  show:false,
	  jook: [],
	  cull:null
    };
  },

  methods: {
    rate() {
      this.api({
        url: '/api/doctor/collect',
        method: 'post',
        data: {
          doctor_id: this.id
        }
      }).then((res) => {
        uni.showToast({
          title: res.msg,
          icon: 'none'
        });
        this.doctor();
      });
    },
    goget() {
      uni.navigateTo({
        url: '/home/allgongg/allgongg?id=' + this.id
      });
    },
    send() {
      uni.navigateTo({
        url: '/send/send/send?id=' + this.id
      });
    },
    getlook() {
      uni.navigateTo({
        url: '/evaluate/evaluate/evaluate?id=' + this.id
      });
    },
    wen() {
	  // console.log(e,'123123123123123');
	  this.show=true;
	  this.api({
	    url: '/api//index/patientList  ',
	    method: 'post'
	  }).then((res) => {
	    this.jook = res.data;
	    this.jook.map((i, k) => {
	      if (i.default == 1) {
	        this.cull = k;
	      }
	    });
	  });
	 
    },
	confirm(e,jook){
			 console.log(e,jook,'121313123123123123');
			  let selectedItem = this.jook[this.cull];
			  let patient_id = selectedItem?.patient_id;
			 console.log(patient_id,'222222222222');
			 if(this.num && this.num!=0){
			 		  console.log('通过,前往聊天页');
			 		  uni.navigateTo({
			 		    url: '/chat/chat/chat?id='+ e+'&patient_id='+patient_id+'&type='+1
			 		  });
			 }else{
			 		  console.log('没有剩余次数,请缴费前往购买页')
			 		  uni.navigateTo({
			 		    url: '/fwpay/fwpay/fwpay?id=' + e + '&type=' + e
			 		  });
			 }
	},
    doctor() {
      this.api({
        url: '/api/doctor/details',
        method: 'post',
        data: {
          doctor_id: this.id
        }
      }).then((res) => {
        this.doctors = res.data;
        this.list.push(this.doctors.notice);
      });
    },
    make() {
      uni.navigateTo({
        url: '/calendar/calendar/calendar?id=' + this.id
      });
    }
  },
  onLoad(op) {
    this.id = op.id;
	this.num=op.num;
    this.doctor();
  }
};
</script>

<style>
.btn {
  /* width: 140rpx; */
  padding: 5rpx 18rpx;
  /* height: 41rpx; */
  background: #fff1e5;
  border-radius: 4rpx;
  text-align: center;
  /* line-height: 41rpx; */
  font-size: 24rpx;
  color: #ff801e;
}

page {
  background: #f8f8f8;
}
</style>
